<template>
    <div class="skin-detail-box" v-loading="loading">
        <el-form :model="skinData" :rules="rules" ref="skinData" inline label-width="120px" class="demo-ruleForm">
            <el-form-item label="职业" prop="careerIdsList" required>
                <el-select v-model="skinData.careerIdsList" multiple collapse-tags style="width:160px" @change="zhiyeChange">
                    <el-option v-for="item in zhiyeList" :key="item.careerId" :label="item.careerName" :value="item.careerId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="英雄名" prop="heroName" required>
                <!-- <el-input v-model="skinData.heroName" style="width:160px"></el-input> -->
                <el-select v-model="skinData.heroName" style="width:160px;" filterable :filter-method="filterHero" @change="heroChange">
                    <el-option :label="skinItem.heroName" :value="skinItem.skinId" v-for="skinItem in heroList" :key="skinItem.skinId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="皮肤名" prop="name" required>
                <el-select v-model="skinData.name" style="width:160px;" filterable :filter-method="filterTrigger" @change="skinChange">
                    <el-option :label="skinItem.name" :value="skinItem.skinId" v-for="skinItem in skinList" :key="skinItem.skinId"></el-option>
                </el-select>
                <el-input v-model="skinData.name" style="width:160px; margin-left: 10px;" placeholder="新增皮肤名"></el-input>
            </el-form-item>
            <!-- <el-form-item label="限定类型" prop="limitType" required>
                <el-select v-model="skinData.limitType" placeholder="请选择限定类型" style="width:160px">
                    <el-option label="非限定" :value="0"></el-option>
                    <el-option label="典藏限定" :value="1"></el-option>
                    <el-option label="热门限定" :value="2"></el-option>
                    <el-option label="普通" :value="3"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="必选类型" prop="required" required>
                <el-select v-model="skinData.required" placeholder="请选择必选类型" style="width:160px">
                    <el-option label="必选" :value="1"></el-option>
                    <el-option label="非必选" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="估值" prop="coupon" required>
                <el-input v-model="skinData.coupon" style="width:160px"></el-input>
            </el-form-item>
            <!-- <el-form-item label="英雄点券价格" prop="couponNum" required>
                <el-input v-model="skinData.couponNum" style="width:160px"></el-input>
            </el-form-item> -->
            <el-form-item label="英雄金币价格" prop="coinNum" required>
                <el-input v-model="skinData.coinNum" style="width:160px"></el-input>
            </el-form-item>
            <!-- <el-form-item label="英雄钻石价格" prop="diamonNum" required>
                <el-input v-model="skinData.diamonNum" style="width:160px"></el-input>
            </el-form-item> -->
            <el-form-item label="趣宝石数量" prop="diamond" required>
                <el-input v-model="skinData.diamond" style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label="APP展示标签" prop="labelName">
                <el-select v-model="skinData.labelName" clearable placeholder="请选择APP展示标签" style="width:160px" @change="labelChange">
                    <div v-for="item in labelList" :key="item.labelId">
                        <el-option :label="item.labelName" :value="item.labelName" v-if="item.status"></el-option>
                    </div>
                </el-select>
            </el-form-item>
            <el-form-item label="英雄经典皮肤" prop="required" required>
                <el-select v-model="skinData.isDefault" placeholder="请选择必选类型" style="width:160px">
                    <el-option label="原皮" :value="1"></el-option>
                    <el-option label="非原皮" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="估值标签" prop="worthLabel">
                <el-input v-model="skinData.worthLabel" style="width:160px"></el-input>
            </el-form-item> -->
            <div class="input-img-box" required>
                <el-form-item label="英雄图片" prop="heroIcon" required>
                    <UploadImg
                        v-model="skinData.heroIcon"
                        width="468"
                        height="468"
                        :search="true"
                    />
                </el-form-item>
                <el-form-item label="皮肤图片" prop="icon" required>
                    <UploadImg
                        v-model="skinData.icon"
                        width="480"
                        height="480"
                        :search="true"
                    />
                </el-form-item>
                <el-form-item label="竖版图片" prop="verticalPic" required>
                    <UploadImg
                        v-model="skinData.verticalPic"
                        width="641"
                        height="945"
                        :search="true"
                    />
                </el-form-item>
            </div>
            <div class="input-img-box" required>
                <el-form-item label="房间队长背景">
                    <UploadImg
                        v-model="skinData.captainPic"
                        width="681"
                        height="552"
                        :search="true"
                    />
                </el-form-item>
                <el-form-item label="房间队员背景">
                    <UploadImg
                        v-model="skinData.teamUserPic"
                        width="330"
                        height="552"
                        :search="true"
                    />
                </el-form-item>
            </div>

            <el-form-item v-if="toolsFlag > 1">
                <el-button @click="cancle">取消</el-button>
                <el-button type="primary" @click="submitForm('skinData')">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    data () {
        const validateColor = (rule, value, callback) => {
            if (value) {
                if (value.length > 0) {
                    callback()
                } else {
                    callback(new Error('请选择职业'))
                }
            }
        }
        return {
            loading: false,
            zhiyeList: [
                {
                    careerId: 100,
                    careerName: '坦克'
                },
                {
                    careerId: 101,
                    careerName: '战士'
                },
                {
                    careerId: 102,
                    careerName: '刺客'
                },
                {
                    careerId: 103,
                    careerName: '法师'
                },
                {
                    careerId: 104,
                    careerName: '射手'
                },
                {
                    careerId: 105,
                    careerName: '辅助'
                }
            ],
            skinList: [],
            heroList: [],
            labelList: [],
            skinData: {
                heroId: null,
                careerIdsList: [],
                skinId: null,
                id: null,
                labelId: null,
                special: 0,
                tradeWzryCareerList: []
            },
            rules: {
                heroName: [
                    { required: true, message: '请输入英雄名', trigger: ['blur', 'change'] }
                ],
                careerIdsList: [
                    { validator: validateColor, trigger: ['change'] }
                ],
                name: [
                    { required: true, message: '请输入皮肤名', trigger: ['blur', 'change'] }
                ],
                limitType: [
                    { required: true, message: '请选择限定类型', trigger: 'change' }
                ],
                required: [
                    { required: true, message: '请选择必选类型', trigger: 'change' }
                ],
                coupon: [
                    { required: true, message: '请输入皮肤点券价格', trigger: ['blur', 'change'] }
                ],
                diamonNum: [
                    { required: true, message: '请输入英雄钻石价格', trigger: ['blur', 'change'] }
                ],
                couponNum: [
                    { required: true, message: '请输入英雄点券价格', trigger: ['blur', 'change'] }
                ],
                coinNum: [
                    { required: true, message: '请输入英雄金币价格', trigger: ['blur', 'change'] }
                ],
                diamond: [
                    { required: true, message: '请输入趣宝石数量', trigger: ['blur', 'change'] }
                ],
                heroIcon: [
                    { required: true, message: '请上传英雄图片', trigger: 'change' }
                ],
                icon: [
                    { required: true, message: '请上传皮肤图片', trigger: 'change' }
                ],
                verticalPic: [
                    { required: true, message: '请上传皮肤长图', trigger: 'change' }
                ]
            },
            toolsFlag: 0 // 是否能保存开关
        }
    },
    watch: {
        skinData: {
            handler () {
                this.toolsFlag++
            },
            deep: true
        }
    },
    created () {
        this.getLabel()
    },
    mounted () {
        let skinId = this.$route.query.skinId
        if (skinId) {
            this.getDetail(skinId)
        } else {
            this.dataInit(this.skinData)
        }
    },

    methods: {
        // 获取详情
        getDetail (skinId) {
            this.loading = true
            let params = {
                pageNum: 1,
                pageSize: 1,
                skinId
            }
            this.$http.get('/trade/selectWZRYSkin', { params }).then(res => {
                this.loading = false
                if (res.code === '0') {
                    this.dataInit(res.data[0])
                    this.skinData = res.data[0]
                    this.skinData.careerIdsList = []
                    res.data[0].tradeWzryCareerList.map(item => {
                        this.skinData.careerIdsList.push(item.careerId)
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        getLabel () {
            this.$http.get('/trade/selectTradeWZRYLabel').then(res => {
                if (res.code === '0') {
                    this.labelList = res.data
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        zhiyeChange (val) {
            this.skinData.tradeWzryCareerList = []
            this.zhiyeList.map(item => {
                val.map(valItem => {
                    if (item.careerId === valItem) {
                        this.skinData.tradeWzryCareerList.push(item)
                    }
                })
            })
        },
        filterHero (heroName) {
            this.$http.post('/trade/selectWzydSkinInfo', { heroName }).then(res => {
                if (res.code === '0') {
                    this.heroList = res.data
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        heroChange (val) {
            // let { icon, verticalPic, tradeWzryCareerList, captainPic, teamUserPic } = this.skinData
            this.heroList.find(item => {
                if (val === item.skinId) {
                    // let {
                    //     heroName, limitType, required, diamond, labelName, worthLabel, heroId
                    // } = item
                    // this.skinData = Object.assign(
                    //     { icon, verticalPic, tradeWzryCareerList, captainPic, teamUserPic },
                    //     { heroName, limitType, required, diamond, labelName, worthLabel, heroId }
                    // )
                    this.skinData.heroIcon = item.heroIcon
                    this.skinData.heroId = item.heroId
                    this.skinData.heroName = item.heroName
                    if (item.tradeWzryCareerList && item.tradeWzryCareerList.length) {
                        this.skinData.careerIdsList = []
                        item.tradeWzryCareerList.map(it => {
                            this.skinData.careerIdsList.push(it.careerId)
                        })
                    }
                }
            })
        },
        filterTrigger (keyWord) {
            this.$http.post('/trade/selectWzydSkinInfo', { keyWord }).then(res => {
                if (res.code === '0') {
                    this.skinList = res.data
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        labelChange (val) {
            this.labelList.find(item => {
                if (val === item.labelName) this.skinData.labelId = item.labelId
            })
        },
        skinChange (val) {
            // let { icon, verticalPic, tradeWzryCareerList, captainPic, teamUserPic } = this.skinData
            this.skinList.find(item => {
                if (val === item.skinId) {
                    // let {
                    //     heroName, name, limitType, required, coupon, couponNum,
                    //     coinNum, diamonNum, diamond, labelName, worthLabel, skinId, heroId
                    // } = item
                    // this.skinData = Object.assign(
                    //     { icon, verticalPic, tradeWzryCareerList, captainPic, teamUserPic },
                    //     { heroName, name, limitType, required, coupon, couponNum, coinNum, diamonNum, diamond, labelName, worthLabel, skinId, heroId }
                    // )
                    this.skinData.heroIcon = item.heroIcon
                    this.skinData.name = item.name
                    this.skinData.skinId = item.skinId
                    this.skinData.icon = item.icon
                    this.skinData.heroName = item.heroName
                    this.skinData.heroId = item.heroId
                    if (item.tradeWzryCareerList && item.tradeWzryCareerList.length) {
                        this.skinData.careerIdsList = []
                        item.tradeWzryCareerList.map(it => {
                            this.skinData.careerIdsList.push(it.careerId)
                        })
                    }
                }
            })
        },
        // 初始化数据
        dataInit (data) {
            // 保存原始数据
            this.firstData = JSON.parse(JSON.stringify(data))
            this.skinData = data
            this.toolsFlag = 0
        },
        // 取消保存
        cancle () {
            this.skinData = JSON.parse(JSON.stringify(this.firstData))
            this.toolsFlag = 0
            this.getDetail(this.$route.query.skinId)
        },
        // 保存数据
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.skinData)
                    this.$http.post('/trade/updateWZRYSkin', params).then(res => {
                        if (res.code === '0') {
                            this.dataInit(res.data)
                            this.$message({
                                type: 'success',
                                message: '修改成功'
                            })
                            this.getDetail(this.$route.query.skinId)
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.desc
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .skin-detail-box {
        min-width: 800px;
        .input-img-box {
            display: flex;
        }
    }
</style>
